<!--
 * @Author: Rain
 * @Date: 2024/01/10 22:11:13
 * @LastEditTime: 2024-01-22 09:22:00
 * @Description: Do Something
-->
<template>
  <div class="app-container w-full h-full overflow-hidden flex flex-col">
    <!--工具栏-->
    <div class="head-container head-container overflow-hidden w-full flex flex-col">
      <div class="flex items-center flex-end search pb-10">
        <!-- 搜索 -->
        <label class="el-form-item-label">申请时间:</label>
        <el-date-picker
          v-model="query.applyTime"
          placeholder="申请时间"
          type="daterange"
        />
        <label class="el-form-item-label">申请人:</label>
        <el-select
          v-model="query.applyUser"
          clearable
          filterable
          placeholder="请选择"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in managerList"
            :key="item.username"
            :label="item.username"
            :value="item.username"
          />
        </el-select>

        <rrOperation :crud="crud" />
        <crudOperation :permission="permission" />
      </div>
    </div>
    <!--表格渲染-->
    <div class="w-full flex-1 overflow-hidden">
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="工单类型"
          prop="applyType"
        >
          <template slot-scope="{ row }">
            {{
              row.applyType * 1 === 1
                ? "身份绑定课程"
                : row.applyType * 1 === 2
                  ? "身份产品分润变更"
                  : row.applyType * 1 === 3
                    ? "门票数量变更"
                    : row.applyType * 1 === 4
                      ? "初始门票设置"
                      : row.applyType * 1 === 5
                        ? "从属关系变更"
                        : row.applyType * 1 === 6 ?
                          "身份变更" : '合伙人变更'
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请人"
          prop="applyUser"
        />
        <el-table-column
          label="提交时间"
          prop="createTime"
        />
        <el-table-column
          label="状态"
          prop="applyStatus"
          width="60px"
        >
          <template slot-scope="{ row }">
            {{
              row.applyStatus === 0
                ? "驳回"
                : row.applyStatus * 1 === 1
                  ? "通过"
                  : "待审批"
            }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="
            checkPer(['admin', 'disChangeApply:edit', 'disChangeApply:del'])
          "
          align="center"
          label="操作"
          width="240px"
        >
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              style="margin-right: 10px"
              type="primary"
              @click="toDetail(row)"
            >详情</el-button>
            <el-button
              :disabled="row.applyStatus > -1"
              size="mini"
              type="success"
              @click="applyAction(row)"
            >审批</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delAction(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination />
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="审批"
      width="600px"
    >
      <template v-if="selectRow && selectRow.applyType === 1">
        <el-form
          :model="applyContent"
          label-width="130px"
        >
          <el-form-item label="身份产品">
            <el-input
              v-model="applyContent.course.title"
              readonly
            />
          </el-form-item>
          <el-form-item label="原绑定课程">
            <div class="flex-1 grid grid-cols-2">
              <div
                v-for="(item, index) in applyContent.courseList"
                :key="index"
                style="font-size: 14px"
              >{{ item.courseName }}</div>
            </div>
          </el-form-item>
          <el-form-item label="绑定课程">
            <div class="flex-1 grid grid-cols-2">
              <div
                v-for="(item, index) in applyContent.list"
                :key="index"
                style="font-size: 14px"
              >{{ item.courseName }}</div>
            </div>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 2">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="130px"
        >
          <el-form-item label="身份产品">
            <el-input
              v-model="applyContent.title"
              readonly
            />
          </el-form-item>
          <el-form-item label="原一级分润">
            <el-input
              v-model="applyContent.defaultoneLevelRatio"
              readonly
            />
          </el-form-item>
          <el-form-item label="原二级分润">
            <el-input
              v-model="applyContent.defaulttwoLevelRatio"
              readonly
            />
          </el-form-item>
          <el-form-item label="原门票权益">
            <el-input
              v-model="applyContent.defaulticketNum"
              readonly
            />
          </el-form-item>
          <el-form-item label="一级分润">
            <el-input
              v-model="applyContent.oneLevelRatio"
              readonly
            />
          </el-form-item>
          <el-form-item label="二级分润">
            <el-input
              v-model="applyContent.twoLevelRatio"
              readonly
            />
          </el-form-item>
          <el-form-item label="门票权益">
            <el-input
              v-model="applyContent.ticketNum"
              readonly
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 3">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="130px"
        >
          <el-form-item label="会员">
            <el-input
              v-model="applyContent.realName"
              readonly
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="applyContent.mobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="微信昵称">
            <el-input
              v-model="applyContent.nickname"
              readonly
            />
          </el-form-item>
          <el-form-item label="门票数量">
            <el-input
              v-model="applyContent.ticketNumber"
              readonly
            />
          </el-form-item>
          <el-form-item label="来源">
            <el-input
              v-model="applyContent.rightType"
              readonly
            />
          </el-form-item>
          <el-form-item label="对象">
            <div
              class="w-full flex flex-col"
              style="border: 1px solid rgba(125,125,125,.3); padding: 10px;border-radius: 6px;"
            >
              <div class="w-full flex items-center">
                <span>对象:</span>
                <span>{{ applyContent.targetUser && applyContent.targetUser.realName }}</span>
              </div>
              <div class="w-full flex items-center">
                <span>手机号:</span>
                <span>{{ applyContent.targetUser && applyContent.targetUser.mobile }}</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 4">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="130px"
        >
          <el-form-item label="会员">
            <el-input
              v-model="applyContent.realName"
              readonly
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="applyContent.mobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="微信昵称">
            <el-input
              v-model="applyContent.nickname"
              readonly
            />
          </el-form-item>
          <el-form-item label="原门票数量">
            <el-input
              v-model="applyContent.defaultTicket"
              readonly
            />
          </el-form-item>
          <el-form-item label="门票数量">
            <el-input
              v-model="applyContent.ticketNumber"
              readonly
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 5">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="130px"
        >
          <el-form-item label="会员">
            <el-input
              v-model="applyContent.realName"
              readonly
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="applyContent.mobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="微信昵称">
            <el-input
              v-model="applyContent.nickname"
              readonly
            />
          </el-form-item>
          <el-form-item label="当前归属人">
            <el-input
              v-model="applyContent.defaultOwnerName"
              readonly
            />
          </el-form-item>
          <el-form-item label="当前归属人手机">
            <el-input
              v-model="applyContent.defaultOwnerMobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="更改归属人">
            <el-input
              v-model="applyContent.superiorRealName"
              readonly
            />
          </el-form-item>
          <el-form-item label="更改归属人手机">
            <el-input
              v-model="applyContent.superiorMobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="更改归属人昵称">
            <el-input
              v-model="applyContent.superiorNickName"
              readonly
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 6">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="100px"
        >
          <el-form-item label="会员">
            <el-input
              v-model="applyContent.realName"
              readonly
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="applyContent.mobile"
              readonly
            />
          </el-form-item>
          <el-form-item label="微信昵称">
            <el-input
              v-model="applyContent.nickname"
              readonly
            />
          </el-form-item>
          <el-form-item label="当前身份">
            <el-input
              v-model="applyContent.defaultName"
              readonly
            />
          </el-form-item>
          <el-form-item label="更改身份">
            <el-input
              v-model="applyContent.identityName"
              readonly
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="selectRow && selectRow.applyType === 7">
        <el-form
          ref="form"
          :model="applyContent"
          label-width="100px"
        >
          <el-form-item label="名称">
            <el-input
              v-model="applyContent.partnerName"
              readonly
            />
          </el-form-item>
          <el-form-item label="星级">
            <el-input
              v-model="applyContent.starNum"
              readonly
            />
          </el-form-item>
          <el-form-item label="成员">
            <el-tabs
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="原成员"
                name="first"
              >
                <el-table
                  :data="applyContent.defaultList"
                  height="300"
                  style="width: 100%;margin-top: 20px;"
                >
                  <el-table-column
                    label="#"
                    type="index"
                  />
                  <el-table-column
                    label="姓名"
                    prop="realName"
                  />
                  <el-table-column
                    label="昵称"
                    prop="nickName"
                  />
                  <el-table-column
                    label="手机号"
                    prop="mobile"
                  />
                </el-table>
              </el-tab-pane>
              <el-tab-pane
                label="更改成员"
                name="second"
              >
                <el-table
                  :data="applyContent.disPartnerUserList"
                  height="300"
                  style="width: 100%;margin-top: 20px;"
                >
                  <el-table-column
                    label="#"
                    type="index"
                  />
                  <el-table-column
                    label="姓名"
                    prop="realName"
                  />
                  <el-table-column
                    label="昵称"
                    prop="nickName"
                  />
                  <el-table-column
                    label="手机号"
                    prop="mobile"
                  />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
      </template>
      <div
        v-if="operate === 2"
        class="w-full flex items-center mt-10"
      >
        <span
          class="m-10"
          style="min-width: 100px;display: inline-block;text-align: right;color: #606266;font-weight: 700;"
        >审批</span>
        <el-radio-group v-model="selectRow.applyStatus">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="0">拒绝</el-radio>
        </el-radio-group>
      </div>
      <div
        v-if="selectRow.applyStatus === 0"
        class="w-full flex items-center"
      >
        <span
          class="m-10 whitespace-nowrap"
          style="min-width: 110px;display: inline-block;text-align: right;font-weight: 700;color:#606266;"
        >审批意见:</span>
        <el-input
          v-model="selectRow.refuseMsg"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入审批意见"
          type="textarea"
        />
      </div>
      <div
        v-if="selectRow.applyStatus === 0 && !selectRow.refuseMsg"
        class="w-full flex items-center pl-130"
        style="color: red;margin-top: 10px;"
      >请输入审批意见</div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="default"
          @click="dialogVisible = false"
        >取消</el-button>
        <el-button
          v-if="operate === 2"
          :loading="crud.status.cu === 2"
          type="primary"
          @click="submitApply"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudDisChangeApply from '@/api/disChangeApply'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
const defaultForm = {
  applyId: null,
  applyType: null,
  applyTypeDesc: null,
  applyUser: null,
  createTime: null,
  updateTime: null,
  updateUser: null,
  applyStatus: null,
  refuseMsg: null,
  mirrorImage: null,
  applyContent: null
}
export default {
  name: 'DisChangeApply',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '分销申请工单',
      url: 'api/disChangeApply',
      idField: 'applyId',
      sort: 'applyId,desc',
      crudMethod: { ...crudDisChangeApply },
      optShow: {
        add: false,
        del: true,
        reset: true,
        upload: false
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'disChangeApply:add'],
        edit: ['admin', 'disChangeApply:edit'],
        del: ['admin', 'disChangeApply:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: 'applyType', display_name: '申请类型' },
        { key: 'applyUser', display_name: '申请人' }
      ],
      dialogVisible: false,
      selectRow: {},
      applyContent: null,
      operate: 1,
      managerList: [],
      activeName: 'first'
    }
  },
  computed: {
    title() {
      if (!this.selectRow) return ''
      else return this.selectRow.applyType === 1 ? '身份产品绑定课程' : '新增'
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.crud.toQuery()
      }
    }
  },
  mounted() {
    this.getManager()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    toDetail(row) {
      this.selectRow = row
      this.operate = 1
      this.getContent()
      this.dialogVisible = true
    },
    applyAction(row) {
      this.selectRow = row
      this.operate = 2
      this.getContent()
      this.dialogVisible = true
    },

    getContent() {
      const { applyContent, applyType } = this.selectRow
      const content = JSON.parse(applyContent)
      if (applyType === 1) {
        // 绑定课程
        const { identityCourseList, course } = content
        this.applyContent = {
          list: identityCourseList,
          course
        }
      } else if (applyType === 2) {
        this.applyContent = content
      } else if (applyType === 3) {
        const { member, rightType, targetUser } = content
        this.applyContent = {
          ...member,
          targetUser,
          rightType: rightType === 0 ? '线下赠予' : rightType === 1 ? '线下售卖' : rightType === 2 ? '赠予撤销' : '售卖撤销'
        }
      } else if (applyType === 4) {
        const { member, ticketNumber } = content
        this.applyContent = {
          ...member,
          ticketNumber
        }
      } else if (applyType === 5) {
        // 从属关系
        const { member, superiorMobile, superiorNickName, superiorRealName } = content
        this.applyContent = {
          ...member,
          superiorMobile,
          superiorRealName,
          superiorNickName
        }
      } else if (applyType === 6) {
        // 身份变更
        const { member, identityName } = content
        this.applyContent = {
          ...member,
          identityName
        }
      } else if (applyType === 7) {
        this.applyContent = content
        console.log(this.applyContent)
      }
    },
    submitApply() {
      crudDisChangeApply.edit(this.selectRow).then((result) => {
        this.dialogVisible = false
        this.crud.toQuery()
      })
    },
    getManager() {
      crudDisChangeApply.getApplyManager().then((_) => {
        this.managerList = _
      })
    },
    delAction(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudDisChangeApply.del([row.applyId]).then((result) => {
          this.crud.toQuery()
          this.$message.success('删除成功!')
        })
      })
    }
  }
}
</script>

<style scoped></style>
